<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品详情</title>
<%@ include file="/WEB-INF/views/layout/public_css.jsp"%>
<%@ include file="/WEB-INF/views/layout/public_js.jsp"%>
<script src="${ctx}/public/js/goods_details.js"></script>
<style type="text/css">
	/*相关样式*/
	#showbox { background:#eee;}
	#showbox span { background:url(${ctx}/public/img/whitebg.png) repeat;}
	#showbox p {z-index:5}
	#showsum { left:25px; margin-top:10px;}
	#showsum span { border:1px solid #ddd;}
	#showsum span.sel { border:1px solid #f60;}
	
	.showpage { width:400px; position:relative;}
	.showpage a { display:block; width:15px; border:1px solid #ddd; height:60px; line-height:60px; background:#eee; text-align:center; font-size:18px; position:absolute; left:0; top:-62px; text-decoration:none; color:#999;}
	.showpage a#shownext { left:auto; right:0;}
	.showpage a:hover { background:#ccc; color:#777;}
	.details-item {
		width:100%;
		height:100%;
		padding:5px 10px ;
		position: absolute;
	    background-color:#fff;
	}
</style>

<script type="text/javascript">
  $(document).ready(function(){
	  var showproduct = {
		  "boxid":"showbox",
		  "sumid":"showsum",
		  "boxw":400,//宽度,该版本中请把宽高填写成一样
		  "boxh":400,//高度,该版本中请把宽高填写成一样
		  "sumw":60,//列表每个宽度,该版本中请把宽高填写成一样
		  "sumh":60,//列表每个高度,该版本中请把宽高填写成一样
		  "sumi":7,//列表间隔
		  "sums":5,//列表显示个数
		  "sumsel":"sel",
		  "sumborder":1,//列表边框，没有边框填写0，边框在css中修改
		  "lastid":"showlast",
		  "nextid":"shownext"
		  };//参数定义	  
	 $.ljsGlasses.pcGlasses(showproduct);//方法调用，务必在加载完后执行
  });
</script>
</head>
<body>
<%@ include file="/WEB-INF/views/layout/head_ele.jsp"%>
<div class="container-fluid">
	<div class="row" style="margin:0px;">
	  <div class="col-md-5">
		<!--页面必要代码,img标签上请务必带上图片真实尺寸px-->
		<div id="showbox">
		  <img src="${ctx}/public/img/photos/img01.png" width="270" height="180" />
		  <img src="${ctx}/public/img/photos/img02.png" width="320" height="735" />
		  <img src="${ctx}/public/img/photos/img03.png" width="430" height="430" />
		  <img src="${ctx}/public/img/photos/img04.png" width="290" height="290" />
		  <img src="${ctx}/public/img/photos/img05.png" width="786" height="525" />
		  <img src="${ctx}/public/img/photos/img06.png" width="300" height="300" />
		  <img src="${ctx}/public/img/photos/img07.png" width="200" height="200" />
		  <img src="${ctx}/public/img/photos/img08.png" width="810" height="582" />
		  <img src="${ctx}/public/img/photos/img09.png" width="1920" height="900" />
		</div><!--展示图片盒子-->
		<div id="showsum"></div><!--展示图片里边-->
		<p class="showpage">
		  <a href="javascript:void(0);" id="showlast"> < </a>
		  <a href="javascript:void(0);" id="shownext"> > </a>
		</p>
	  </div>
	  <div class="col-md-7">
	  	<h3>产品/服务名称</h3>
	  	<h4>最高限价</h4>
	  	<h4>上架时间</h4>
	  	<h4>更新时间</h4>
	  	<h4>产品报价</h4>
	  	<h4>价格来源</h4>
	  	<h4>质保信息</h4>
	  	<h4>配送区域</h4>
	  	<div class="row" style="background-color:#ddd;width:60%;margin-left:0px;padding:10px">
	  		 <div class="col-md-6">近3个月成交均价： </div>
	  		 <div class="col-md-6">近3个月销量：</div>
	  	</div>
	  	<div style="margin-top:20px;">
		  	<button type="button" class="btn btn-primary" style="margin-right:20px;">选择供应商购买</button>
		  	<button type="button" class="btn btn-primary">发起竞价</button>
	  	</div>
	  </div>
	</div>
	
	<ul class="nav nav-tabs">
	  <li role="presentation" class="nav-item active" id="nav-item1"><a href="javascript:void(0)">供应商</a></li>
	  <li role="presentation"  class="nav-item" id="nav-item2"><a href="javascript:void(0)">详细参数</a></li>
	  <li role="presentation" class="nav-item" id="nav-item3"><a href="javascript:void(0)">商品评论</a></li>
	  <li role="presentation" class="nav-item" id="nav-item4"><a href="javascript:void(0)">成交记录</a></li>
	</ul>
	<div style="position:relative;height:500px;">
		<div class="details-item" id="details-item1">
			供应商信息
		</div>
    	<div class="details-item" id="details-item2">
		    详细参数
    	</div>
    	<div class="details-item" id="details-item3">
    		商品评论
    	</div>
    	<div class="details-item" id="details-item4">
    		成交记录
    	</div>
	</div>
</div>
<script type="text/javascript">
	$("#nav-item1").click(function(){
		$(".nav-item").removeClass("active");
		$(this).addClass("active");
		$(".details-item").hide();
		$("#details-item1").show();
	});
	$("#nav-item2").click(function(){
		$(".nav-item").removeClass("active");
		$(this).addClass("active");
		$(".details-item").hide();
		$("#details-item2").show();
	});
	$("#nav-item3").click(function(){
		$(".nav-item").removeClass("active");
		$(this).addClass("active");
		$(".details-item").hide();
		$("#details-item3").show();
	});
	$("#nav-item4").click(function(){
		$(".nav-item").removeClass("active");
		$(this).addClass("active");
		$(".details-item").hide();
		$("#details-item4").show();
	});
</script>
</body>
</html>